<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>播放器-VUE+axios</title>
		<!-- easyUI 文件 -->
		<link rel="stylesheet" type="text/css" href="../../assets/easyUi/themes/gray/easyui.css" />
		<link rel="stylesheet" type="text/css" href="../../assets/easyUi/themes/icon.css" />
		<script src="../../assets/easyUi/jquery.min.js" type="text/javascript"></script>
		<script src="../../assets/easyui/jquery.easyui.min.js" type="text/javascript"></script>
		<!-- VUE & axios -->
		<script src="../../assets/js/base/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../assets/js/base/axios.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app" class="easyui-layout" style="width:1600px;height:1400px;">
			<div data-options="region:'north',title:'North Title',split:true" style="height:100px;">
				<div class="mui-input-row mui-search">
					<input v-on:keyup.enter="query" v-model="keywords" type="search" class="mui-input-clear" placeholder="请输入关键字...">
					<button @click="query" type="button">搜索</button>
				</div>
			</div>
			<div data-options="region:'east',title:'East',split:true" style="width:500px;">
				<div>热门评论</div>
				<ul>
					<li v-for="comment in comments">
						<div>
							<img width="50px" height="50px" :src="comment.user.avatarUrl" />
							<div>{{comment.user.nickname}}</div>
							<p>{{comment.content}}</p>
						</div>
					</li>
				</ul>
			</div>
			<div data-options="region:'west',title:'West',split:true" style="width:150px;">
				<ul>
					<li v-for="music in musicList">
						<span @click="play(music.id)">{{music.name}}</span>
						<!-- id(mvid,为0表示没有mv) -->
						<button v-on:click="playMv(music.mvid)" v-if="music.mvid != 0">mv</button>
					</li>
				</ul>
			</div>
			<div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;">
				<div style="margin: 0 auto;">
					<img width="200px" height="200px" :src="musicPic" />
				</div>
				<audio v-bind:src="musicUrl" controls autoplay loop>
					当前浏览器不支持audio
				</audio>
				<div style="width: 1000px;height: 200px;">
					<video ref='video'  :src="mvUrl" controls="controls"></video>
					<button @click="stopMV">停止播放MV</button>
				</div>
			</div>
		</div>
		<script src="../../assets/js/player/player.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>
